import React, {Component} from 'react';
import './Ibody_hero.css'
import BannerAnim, {Element} from 'rc-banner-anim';
import TweenOne from 'rc-tween-one';
import 'rc-banner-anim/assets/index.css';
import img1 from '../img/body/slider01.jpg';
import img2 from '../img/body/slider02.jpg';
import img3 from '../img/body/slider03.jpg';
import img4 from '../img/body/slider04.jpg';
import img5 from '../img/body/slider05.jpg';

const BgElement = Element.BgElement;
export default class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.imgArray = [
            img1, img2, img3, img4, img5
        ];
        this.state = {
            intro: ["“我国水泥工业环境状况调查”项目第一次专家组会议顺利召开",
                "挪威Brokmans博士、德国Fischer博士和Riechert女士来华开展学术交流",
                "课题组成员赴德国、瑞士开展学术交流",
                "云南华润弥渡水泥窑协同处置生活垃圾",
                "高高原富氧燃烧技术在西藏高争建材股份有限公司绽放异彩"],

        }
    }

    handleClick1 = (key) => {
        var domain = window.location.host;
        const w = window.open('about:blank');
        w.location.href = 'http://'+domain+'/news_one';
    };
    handleClick2 = () => {
        var domain = window.location.host;
        const w = window.open('about:blank');
        w.location.href = 'http://'+domain+'/news_two';
    };
    handleClick3 = () => {
        var domain = window.location.host;
        const w = window.open('about:blank');
        w.location.href = 'http://'+domain+'/news_three'
    };
    handleClick4 = () => {
        var domain = window.location.host;
        const w = window.open('about:blank');
        w.location.href = 'http://'+domain+'/news_four';
    };
    handleClick5 = () => {
        var domain = window.location.host;
        const w = window.open('about:blank');
        w.location.href = 'http://'+domain+'/news_five';
    };

    render() {
        return (
            <BannerAnim prefixCls="banner-user"
                        id="hero"
                        autoPlay={true}
                        autoPlaySpeed={5000}
                        dragPlay={false}
            >
                <Element
                    onClick={(key) => this.handleClick1(key)}
                    prefixCls="banner-user-elem"
                    key="0"
                >
                    <BgElement
                        key="bg"
                        className="bg1"
                        style={{
                            backgroundImage:`url(${this.imgArray[0]})`,
                        }}
                    />
                    <TweenOne className="banner-user-title" animation={{y: 30, opacity: 0, type: 'from'}}>
                        {this.state.intro[0]}
                    </TweenOne>
                    {/***这里可以加二级标题，用作解释***/}
                    {/*<TweenOne className="banner-user-text" animation={{y: 30, opacity: 0, type: 'from', delay: 100}}>*/}
                    {/*The Fast Way Use Animation In React*/}
                    {/*</TweenOne>*/}
                </Element>
                <Element
                    onClick={this.handleClick2}
                    prefixCls="banner-user-elem"
                    key="1"
                >
                    <BgElement
                        key="bg"
                        className="bg2"
                        style={{
                            backgroundImage: `url(${this.imgArray[1]})`,

                        }}
                    />
                    <TweenOne className="banner-user-title" animation={{y: 30, opacity: 0, type: 'from'}}>
                        {this.state.intro[1]}
                    </TweenOne>
                    {/***这里可以加二级标题，用作解释***/}
                    {/*<TweenOne className="banner-user-text" animation={{y: 30, opacity: 0, type: 'from', delay: 100}}>*/}
                    {/*The Fast Way Use Animation In React*/}
                    {/*</TweenOne>*/}
                </Element>
                <Element
                    onClick={this.handleClick3}
                    prefixCls="banner-user-elem"
                    key="2"
                >
                    <BgElement
                        key="bg"
                        className="bg3"
                        style={{
                            backgroundImage: `url(${this.imgArray[2]})`,
                        }}
                    />
                    <TweenOne className="banner-user-title" animation={{y: 30, opacity: 0, type: 'from'}}>
                        {this.state.intro[2]}
                    </TweenOne>
                    {/***这里可以加二级标题，用作解释***/}
                    {/*<TweenOne className="banner-user-text" animation={{y: 30, opacity: 0, type: 'from', delay: 100}}>*/}
                    {/*The Fast Way Use Animation In React*/}
                    {/*</TweenOne>*/}
                </Element>
                <Element
                    onClick={this.handleClick4}
                    prefixCls="banner-user-elem"
                    key="3"
                >
                    <BgElement
                        key="bg"
                        className="bg4"
                        style={{
                            backgroundImage: `url(${this.imgArray[3]})`,
                        }}
                    />
                    <TweenOne className="banner-user-title" animation={{y: 30, opacity: 0, type: 'from'}}>
                        {this.state.intro[3]}
                    </TweenOne>
                    {/***这里可以加二级标题，用作解释***/}
                    {/*<TweenOne className="banner-user-text" animation={{y: 30, opacity: 0, type: 'from', delay: 100}}>*/}
                    {/*The Fast Way Use Animation In React*/}
                    {/*</TweenOne>*/}
                </Element>
                <Element
                    onClick={this.handleClick5}
                    prefixCls="banner-user-elem"
                    key="4"
                >
                    <BgElement
                        key="bg"
                        className="bg5"
                        style={{
                            backgroundImage: `url(${this.imgArray[4]})`,
                        }}
                    />
                    <TweenOne className="banner-user-title" animation={{y: 30, opacity: 0, type: 'from'}}>
                        {this.state.intro[4]}
                    </TweenOne>
                    {/***这里可以加二级标题，用作解释***/}
                    {/*<TweenOne className="banner-user-text" animation={{y: 30, opacity: 0, type: 'from', delay: 100}}>*/}
                    {/*The Fast Way Use Animation In React*/}
                    {/*</TweenOne>*/}
                </Element>
            </BannerAnim>);
    }
}